<template>
  <Teleport to="body">
    <Transition name="modal">
      <div v-if="isOpen" class="fixed inset-0 z-[70] overflow-y-auto">
        <!-- 背景遮罩 -->
        <div 
          class="fixed inset-0 bg-background-950/80 backdrop-blur-sm transition-opacity duration-normal"
          @click="handleBackdropClick"
        ></div>
        
        <!-- 模态内容 -->
        <div class="flex min-h-full items-center justify-center p-4">
          <div class="relative w-full" :class="maxWidthClass">
            <!-- 关闭按钮 -->
            <UiButton
              v-if="showCloseButton"
              variant="close"
              size="sm"
              class="absolute -top-4 -right-4 z-10"
              @click="handleClose"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </UiButton>
            
            <!-- 模态卡片 -->
            <div class="glass-effect rounded-2xl shadow-2xl overflow-hidden border border-background-700/50">
              <!-- 标题区域 -->
              <div v-if="title" class="text-center py-6 px-6 border-b border-background-700/50">
                <h2 class="text-2xl font-extrabold text-text-primary">
                  {{ title }}
                </h2>
                <p v-if="subtitle" class="mt-2 text-sm text-text-muted">
                  {{ subtitle }}
                </p>
              </div>
              
              <!-- 内容区域 -->
              <div class="p-6">
                <slot />
              </div>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { UiButton } from './index'

interface Props {
  isOpen: boolean
  title?: string
  subtitle?: string
  showCloseButton?: boolean
  closeOnBackdrop?: boolean
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
}

const props = withDefaults(defineProps<Props>(), {
  showCloseButton: true,
  closeOnBackdrop: true,
  maxWidth: 'md'
})

const emit = defineEmits<{
  close: []
}>()

const maxWidthClass = computed(() => {
  const widthMap = {
    sm: 'max-w-sm',
    md: 'max-w-md',
    lg: 'max-w-lg',
    xl: 'max-w-xl',
    '2xl': 'max-w-2xl',
    '3xl': 'max-w-3xl',
    '4xl': 'max-w-4xl',
    '5xl': 'max-w-5xl',
    '6xl': 'max-w-6xl',
    '7xl': 'max-w-7xl'
  }
  return widthMap[props.maxWidth]
})

const handleClose = () => {
  emit('close')
}

const handleBackdropClick = () => {
  if (props.closeOnBackdrop) {
    handleClose()
  }
}
</script>

<style scoped>
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease-in-out;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-active .bg-background-950\/80,
.modal-leave-active .bg-background-950\/80 {
  transition: opacity 0.3s ease-in-out;
}

.modal-enter-from .bg-background-950\/80,
.modal-leave-to .bg-background-950\/80 {
  opacity: 0;
}
</style>
